<template>
  <div>
    <div class="customRadioTagNew">
      <ul ref="tagsContainer" :class="{ isScroll: isScroll }">
        <li v-for="(item, index) in tagsList" :key="index" :class="{ active: active === item[fieldName] }" @click="changeTags(item, index)">
          {{ item[fieldName] }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomRadioTagNew',
  props: {
    isScroll: {
      type: Boolean,
      default: true
    },
    fieldName: {
      type: String,
      default: 'label'
    },
    checkValue: {
      type: String,
      default: '重点排污'
    },
    list: {
      type: Array,
      default: () => [
        {
          label: '重点排污'
        },
        {
          label: '固废产废'
        }
      ]
    }
  },
  data() {
    return {
      tagsList: [],
      active: '',
      activeIndex: 0
    }
  },
  watch: {
    checkValue(nv) {
      this.initTagsData()
    },
    list(nv) {
      this.initTagsData()
    }
  },
  mounted() {
    this.initTagsData()
    this.$nextTick(() => {
      this.initTags('tagsContainer', this.activeIndex)
    })
  },
  methods: {
    initTagsData() {
      this.active = this.checkValue
      this.tagsList = this.list
      this.activeIndex = this.tagsList.findIndex((v) => {
        return v[this.fieldName] === this.active
      })
    },
    changeTags(item, index) {
      this.active = item[this.fieldName]
      this.activeIndex = index
      this.initTags('tagsContainer', index)
      this.emit()
    },
    initTags(name, active) {
      this.containerWidth = this.$refs[name].clientWidth
      const tagItemArr = []
      const tagItems = this.$refs[name].getElementsByTagName('li')
      Array.prototype.slice.call(tagItems).forEach((li) => {
        tagItemArr.push(li.clientWidth)
      })
      let beforeCurrentWidth = 0
      let currentWidth = 0
      for (const i in tagItemArr) {
        if (i < active) {
          // 20来源于每个item的margin-left
          beforeCurrentWidth += tagItemArr[i] + 20
        } else if (i === active) {
          currentWidth = tagItemArr[i]
        } else {
          break
        }
      }
      const scrollLeft = beforeCurrentWidth - 20 + currentWidth / 2 - this.containerWidth / 2
      this.$refs[name].scrollLeft = scrollLeft
    },
    emit() {
      this.$emit('change', {
        index: this.activeIndex,
        active: this.active
      })
    }
  }
}
</script>

<style lang="scss">
.customRadioTagNew {
  width: 100%;
  height: auto;
  ul {
    width: 100%;
    height: auto;
    display: flex;
    &.isScroll {
      overflow: hidden;
      overflow-x: auto;
      scroll-behavior: auto;
      scroll-behavior: smooth;
      li {
        padding: 0 15px;
        white-space: nowrap;
      }
    }
    li {
      flex: 1;
      min-width: 100px;
      max-width: auto;
      height: 64px;
      font-size: 26px;
      box-sizing: border-box;
      background-color: #4a92ff;
      border-radius: 7px 7px 0px 0px;
      border: solid 2px #ffffff;
      margin-right: 10px;
      transition: all 0.3s;
      color: #eaf5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom-width: 0;
      &.active {
        background-color: #ffffff;
        border-radius: 7px 7px 0px 0px;
        border: solid 2px #4aabff;
        color: #4296ea;
        font-weight: bold;
        border-bottom-width: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
  }
}
</style>
